<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id='app'>
        <modal-button></modal-button>
    </div>
    <script>
        const app = Vue.createApp({})

        app.component('modal-button', {
            template: `
                <button @click="modalOpen = true">
                    Open full screen modal! (With teleport!)
                </button>

                <teleport to="body">
                    <div v-if="modalOpen" class="modal">
                        <div>
                        I'm a teleported modal! 
                        (My parent is "body")
                        <button @click="modalOpen = false">
                            Close
                        </button>
                        </div>
                    </div>
                </teleport>
            `,
            data() {
                return {
                    modalOpen: false
                }
            }
        })

        app.mount("#app")    
    </script>
</body>

</html>